<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 告知浏览器此页面属于什么字符编码格式 -->
		<title>CQUT孙煜琳-Vue</title>
		<link rel="icon" href="./images/AI_black.png" type="image/x-icon" />

		<!-- js外部文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
		<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>

	
		<style>
			.fade-enter-active, .fade-leave-active {
				transition: opacity 2s
			}
			.fade-enter, .fade-leave-to {
				opacity: 0
			}
		</style>
	</head>
	<body background = "blue.jpg">
		<h4>Vue 练习页面</h4>
		<div id="myVue">
			<p>======== 单向绑定 ========</p>
			<!-- Text：页面单项绑定：属性进行渲染 -->
			<!-- {{}} 双大括号语法，页面文本绑定 Vue Data 中的数据； -->
			<h4>{{title}}</h4>

			<!-- Html：v-html 语法，页面绑定 Html 内容； -->
			<p v-html="htmlString"></p>

			<!-- Attribute：v-bind:（缩写:）语法，页面标签属性绑定 Vue Data 中的数据，属于 Vue 到 Dom 的单向绑定； -->
			<p>
				<label>用户ID：</label>
				<input type="text" :value="'userID_' + user.id"/>
			</p>
			<p>
				<label>用户名：</label>
				<input type="text" :value="user.userName"/>
			</p>
			<p>
				<label>密码：</label>
				<input type="password" :value="user.password"/>
			</p>
			<!-- 对象语法 -->
			<p :style="{color: color}">用户名：{{user.userName | filter1| filter2}}</p>
			<p :style="style">用户名：{{user.userName}}</p>
			<p >年龄：{{user.age}}</p>

			<p>======== 计算器 ========</p>
			<p>				
				<span>{{capitalize}}</span>
			</p>


			<p>======== 监听器 ========</p>
			<p>
				<label>Title：</label>
				<input type="text" V-model="title"/>
			</p>
			<p>
				<label>用户名：</label>
				<input type="text" V-model="user.userName"/>
			</p>
			<p>
				<span style="color:red;">{{title_error}}</span>
				<span style="color:blue;">{{userName_error}}</span>

			</p>


			<p>======== 事件绑定 ========</p>
			<p>
				<button @click="user.age += 1">按钮1</button>
				<button @click="test1()">按钮2</button>
				<button @click="test2('Sunyulin', $event)" 
				name="but2" value="11923040212" myData="YuLinSun">按钮3</button>
			</p>

			<p>======== 动画过度 ========</p>
			<button @click="show = !show">按钮4</button>
			<transition name="fade">
				<p v-show="show">动画效果</p>
			</transition>

			<p>======== 双向绑定 ========</p>
			<!-- v-model 语法：页面表单控件绑定 Vue Data 中的数据，属于 Vue 和 Dom 的双向绑定； -->
			<p>
				<label>用户名：</label>
				<!-- .trim：自动过滤用户输入的首尾空白字符 -->
				<!-- 自动删除首行空格 -->
				<input type="text" v-model.trim="user.userName"/>
			</p>
			<p>
				<label>密码：</label>
				<input type="password" v-model="user.password"/>
			</p>
			<p>
				<label>年龄：</label>
				<!-- number：自动将用户的输入值转为数值类型 -->
				<input type="text" v-model.number="user.age"/>
			</p>


			<p>======== 条件渲染 ========</p>
			<p>
				<!-- v-if：指令用于条件性地渲染一块内容； -->
				<span v-if="user.age > 18 ">陈连仁</span>
				<span v-else-if="user.age == 18">刚成年</span>
				<span v-else="user.age ">小朋友</span>
				<!-- <span  v-for="(item, index) in data" v-if="index < 6">小于六</span>
				<span  v-for="(item, index) in data" v-else="index">大于等于</span> -->

				<!-- v-show：元素始终会被渲染并保留在 DOM 中，v-show 只是简单地切换元素的 CSS 属性中的 display； -->
				<p><span v-show="show">我是一个大大的框框</span></p>
			</p>

			<p>======== 列表/循环渲染 ========</p>
			<!-- v-for：页面标签绑定 Vue Data 中的 List 数据，循环处理；
			使用 v-for 的时候需要添加 key 属性，
			Vue 在更新渲染 Dom 的时候是根据新旧 Dom 树进行对比的，
			使用 key 来给每个节点做一个唯一标识； -->
			<p>
				<ul>
					<li v-for="item in roles" :key="item.id">
					{{item.roleName}}</li>
				</ul>
			</p>
			<p>
				<ul>
					<li v-for="(item,index) in roles" :key="item.id">
					{{index}}_{{item.roleName}}</li>
				</ul>
			</p>
			<p>
				<select>
					<option v-for="(item, index) in roles" :key="item.id" 
					:value="item.id">{{item.roleName}}</option>
				</select>
			</p>
			<p>
				<table>
					<tr><td>ID</td><td>RoleName</td></tr>
					<tr v-for="(item, index) in roles" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.roleName}}</td>
					</tr>
				</table>
			</p>


		</div>
		<script>
			$(function(){
				test4();
			});
			// 全局过滤器
			Vue.filter("filter2", function(value){
						if  (!value){
							return "";
						}
						return value.replace("n","*");
					});
			var myVue = new Vue({
				el:"#myVue",
				data:{
					title:"This is Vue Test Page.",
					htmlString:"<span style='color: red;'>我想吃烧烤。</span>",
					color: "blue",
					title_error: "",
					userName_error: "",
					style: { color: "yellow" },
					show: true,
					user:{
						id: 1,
						userName:"Sunyulin",
						age: 19,
						password:"11923040212",
						gender:"female",
					},
					roles:[
						{id: 1,roleName:"admin"},
						{id: 2,roleName:"manager"},
						{id: 3,roleName:"staff"},
					]
				},
				methods: {
					test1: function() {
						console.log("This is a text1 function.");
					},
					test2: function(name, event) {
						if (event){
							console.log(name);
							var target = event.currentTarget;
							// 标签自带属性取法
							console.log(target.name);
							console.log(target.value);
							// 目标对象，自定义属性法
							console.log(target.attributes.getNamedItem("myData").name);
							console.log(target.attributes.getNamedItem("myData").value);
							var myDataKey = target.attributes.getNamedItem("myData").name;
							var myDataValue = target.attributes.getNamedItem("myData").value;
						}
					},
					test3: function(){
						console.log("挂载生命周期方法1");
					},
					test4: function(){
						console.log("挂载生命周期方法2");
					},
					getUserById: function(){
						var self = this;
						$.ajax({
							url: "http://www.sfac.xyz/api/user/1",
							type:"get",
							success: function(rs) {
								self.user = rs;
							},
							error: function(rs) {
								console.log(rs);
							}
						})
					}
				},
				watch:{
					// 监听一级属性
					title(newValue, oldValue){
						this.title_error = newValue.length > 6 ? "title太长了" : "";
					},
					// 监听对象属性
					'user.userName'(newValue, oldValue){
						console.log(newValue);
						this.userName_error = newValue.length > 6 ? "用户名太长了" : "";
					},
				},
				// 计算器
				computed: {
					capitalize: function(){
						return this.user.userName[0].toUpperCase() + this.user.userName.substr(1);
					}
				},
				// 局部过滤器
				filters:{
					filter1: function(value){
						if  (!value){
							return "";
						}
						return value.replace("u","_");
					}
				},
				// 生命周期
				created () {
					// 通过 created 生命周期 将 Vue 实例定义的 test4 方法， 赋值给 window test4
					window.test4 = this.test4;
				},
				mounted () {
					// 初始化页面调用函数
					this.test3();
					this.getUserById();
				}
			});
		</script>
	</body>
</html>
